<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			.box1{
				width:200px;
				height:200px;
				border:1px red solid;
				font-size: 32px;/*字体大小*/
				text-align: center;
				/*浮动float:left（左浮动）/right(右浮动)/none(没有，默认值，不浮动)*/
				float:right;
			}
			.box2{
				width:800px;
				height:300px;
				border:33px solid black;
			}
			.clear{
				clear:both;
			}
			.bigbox{
				overflow:hidden;/*超出部分隐藏*/
				/*清除浮动的第三种方式：代表网易 淘宝*/
			}clearfix{/* 在clearfix类的后面元素 */ 

			content: "";/* 内容为空 */ 

			display: block;/* 将块元素转换为块级盒子 */ 

			height: 0;/* 高度设置为0 */ 

			clear: both;/* 清楚两端浮动 */ 

			visibility: hidden;/* 显示状态:隐藏 */ 

		} 

		/* 清除浮动的第四种方式: */ 

		.clearfix::after,.clearfix::backdrop 

		{ 

			content: ""; 

			display: table; 

		} 

		.clearfix::after{ 

			clear: both; 

		} 

		</style> 

	</head> 

	<body> 

		，<!---传统的网页布局：标准流+浮动+定位 

		浮动：float 

		快速创建标签 

		快速创建类名为box的盒子：box*个数>tab 

		1.浮动的元素会脱离标准流（脱标）。解决方法：清除浮动。 

		2.浮动的元素会一行内显示并且顶部对齐。 

		3.浮动的元素会具有行内块元素类似的特征 

		网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动 

		标准流+浮动布局政策 

		清除浮动的方法： 

		1.额外标签法，隔墙法。即给浮动的盒子后添加一个额外的块级标签， 

							并且标签加入clear:both;(清除浮动)。此方法不常用 

		2.给父级元素添加overflow：hidden；属性。 ---> 

		<div class="bigbox clearfix"> 

			<div class="box1">1</div> 

			<div class="box1">2</div> 

			<div class="box1">3</div> 

			<div class="clear"></div> 

		</div> 

		<div class="box2"></div> 
	</body>
</html>